大家好，这里是开瓢手卡比

        曾经不忿于最佳新员工的kindle没拿到，自己入了一个，然后吃灰至今。

        个人很爱看小说，开源阅读app实在是个好东西，奈何眼睛不行，就想着能不能用kindle看，但是app自带的web端采用滚动翻页，对墨水屏很不友好，于是就有了做一个web端适配的想法。

        开发完才发现，这个好像不止能支持kindle，在所有长方形尺寸的墨水屏设备商应该都可以有不错的表现（墨水屏滑动翻页稀烂），欢迎大家探索尝试。

        kabi-novel项目在一个html文件（当前44kb）内实现了一个单页模式的阅读应用，采用点击翻页，书架/目录/正文三级展示结构，通过配置阅读app服务地址的形式拉取数据，在内容排版、压缩缓存等方面进行了攻关，实现了字号行距调整、缓存管理、进度同步等功能；同时由于个人强迫症所致，在克服浏览器老旧内核适配问题的前提下，采用typescript与less进行原生开发，实现了gulp工作流搭建、双向绑定、简易路由、排版分页、进度条、弹框、提示等功能与组件，已经基本上是一个可堪使用的原生开发框架了。

        由于此前的简单介绍太过简陋，同时原先的在线试用渠道已经被反馈失败，所以下面我将尝试进行更完善的说明。

        kabi-novel项目在github上进行开源，项目地址为https://github.com/cyx7788414/kabi-novel，欢迎大家进行反馈交流，也欢迎大佬自行二次开发。

        项目成果就是根目录下打包生成的dist/kabi-novel.html文件了，可以有在线与本地两种使用方式，在旧的试用渠道失效后，为了避免浪费大家的时间，我将最新版本的kabi-novel发布到了我的github pages内，大家可以通过下面的链接试用，进行基本的可用性检测：

        https://cyx7788414.github.io/kabi-novel.html

        同时也请大家再试用后及时按照下文的方法自行部署使用，因为github pages资源有限，也经常被墙，一旦失效会导致缓存丢失，十分麻烦。

        下面正式介绍两种部署方法。

        在线使用是我最为推荐的方式，这种方式需要kabi-novel.html文件以网页的形式发布在内网或者公网，获得固定的域名或者IP（不然域名/IP变了会丢缓存），可以在本地或者公网服务器采用如nginx之类的web服务器进行部署，然后也可以通过向日葵等内网穿透工具实现本地部署公网使用的效果。

        由于每次浏览器关闭后再打开会重新加载，所以在线使用方式要求联网，若缓存好了内容，同时保证不关闭浏览器，则不会触发重新加载，就可以变相实现离线使用了。

        所以在线使用方式的缺点是有联网需求，优点是不切换域名/IP就不丢缓存。

        有动手能力的朋友应该可以看懂上面的部分术语自行部署，看不懂的朋友也不要着急，可以等待未知大佬提供的免费服务（如果有的话后面会更新），也可以采用本地使用方式。

        本地使用方式是与我最初设想有出入的，最开始由于我的预研没做到位，以为用file://协议打开同一个本地文件可以有同一个缓存，结果开发完成后才发现，kindle浏览器每次打开本地文件都是新的缓存（旧的应该被丢了），导致本地使用方式不得不成为备选。

        本地使用方式需要将kindle通过数据线连上电脑，然后将kabi-novel.html拷入kindle根目录，然后通过在kindle浏览器地址栏输入file:///mnt/us/kabi-novel.html来进行访问。

        本地使用方式的缺点就是每次关闭浏览器都必丢缓存，下次使用需要重新配置（因为配置也是写在缓存里的）与缓存内容，但是优点就是无需访问服务器来获取kabi-novel.html了。

        两种方式都可以通过添加浏览器书签的方法来快速打开页面，都可以通过修改kabi-novel.html的文件名来缩短访问路径。

        下面对使用流程进行介绍。

        页面在初始化时会自动跳转到配置页。

        打开手机热点，kindle连接手机热点，开源阅读app在“我的——web服务”设置项内打开web服务，可以得到服务地址，例如：http://192.168.123.234:1122。

        在配置页完整输入开源阅读app的服务地址，注意，需要输入协议头，即从http开始输入。

        点击测试按钮，进行网络校验。

        校验通过后弹出提示，再点击检测按钮进行缓存初始化检测，由于进行大量内容擦写设备会卡顿，稍等片刻，检测完成后可以提供缓存容量监控与报警效果。

        通过测试文本观察效果，调整字号与行距到自己觉得舒适的数值。

        点击左下角“书架”，来到书架页，此时没有数据，需要点击下方刷新按钮拉取书架内容，右下方左右按钮翻页。

        注意，由于下方操作空间有限，配置页只能从书架页左下角进入。

        点击书架中的书籍，进入正文页，开始阅读。

        正文页可以提供去往书架与目录的按钮，可以刷新内容，右下角翻页。

        点击“目录”按钮，可以进入目录页，首次加载根据目录内容可能会卡顿（量大），仅在目录页可以进行缓存操作，默认缓存最近5章，在对应书籍目录内才可删除对应书籍缓存。

        介绍就到这里了。

        下面是一些开发吐槽。

        kindle浏览器内核是真老啊，要打包到es5的规范才能用，写惯了的es6语法糖不能用了。    

        单页缓存只给不到2.5M，测试缓存容量卡的要死，给了异步操作也不行，还是卡。

        kindle强行给浏览器加了滚动条，ban掉了内部容器的滚动条，但是刚好和窗口那么大的页面，非得多留20像素的滚动余量是为啥，还消不掉，也不让禁止缩放，点快了就缩放，输入框也缩放，真不是个东西。

        好好的css3也不支持，column多列布局不让用，逼我用滚动条模拟翻页自己写自适应排版，不支持calc样式计算，逼我拿js自己算去绑定style，垃圾。

        性能稀巴烂，目录几千条写成div就卡死了，逼我做虚拟分页搞性能优化，什么玩意。

        其实吧，做这个项目的过程比这个项目对我来说有用得多。

        算是了一个执念，让我觉得kindle还是应该吃灰比较好。